// import { useState } from 'react'
// import logo from './logo.svg'
// import './App.css'

// function App() {
//   const [count, setCount] = useState(0)

//   return (
//     <div className="App">
//       <header className="App-header">
//         <img src={logo} className="App-logo" alt="logo" />
//         <p>Hello Vite + React!!!</p>
//         <p>
//           <button type="button" onClick={() => setCount((count) => count + 1)}>
//             count is: {count}
//           </button>
//         </p>
//         <p>
//           Edit <code>App.jsx</code> and save to test HMR updates.
//         </p>
//         <p>
//           <a
//             className="App-link"
//             href="https://reactjs.org"
//             target="_blank"
//             rel="noopener noreferrer"
//           >
//             Learn React
//           </a>
//           {' | '}
//           <a
//             className="App-link"
//             href="https://vitejs.dev/guide/features.html"
//             target="_blank"
//             rel="noopener noreferrer"
//           >
//             Vite Docs
//           </a>
//         </p>
//       </header>
//     </div>
//   )
// }

// export default App
// 一个函数返回一段jsx
// 解构 React Hooks
import React, {useState} from 'react';
const APP = () =>{
  //let name = 'gch';
  // state 状态
  // 当前组件添加一个状态  默认值
  let [isSingle, setisSingle] = useState(true);// 单身
  let [name, setName] = useState('龚春红') // 给jsx 带来状态
  let [date, setDate] = useState(new Date().toLocaleTimeString())
  // JSX {} 占位符 简单用法 输出值
  // {} 内就是js 运行区域 结果默认输出
  console.log(useState(1))
  setInterval(() => {
    setDate(new Date().toLocaleTimeString())
  },1000)
  const changeName = () => {
    //console.log('lalala')
    setName('miaomiao')
  }
  const friends = [{
    name :'gch',
    age: 18,
  },
   {
  name: 'lwb',
  age: 18
   }];
   return (
     <div>
        {/* JSX 简单 高效的ul 表单方式 状态+时间+.... */}
       <p>{isSingle?<span>单身</span>:<span>有主</span>}</p>
       <h1>hello {name}</h1>
       <ul>
         {
           friends.map((friend, index) => <li>{friend.name}--{friend.age}</li>)
         }
       </ul>
       <button onClick={changeName}>显示英文名</button>
     </div>
   )
}
export default APP